<template>
    <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo nva_style" mode="horizontal" @select="handleSelect">
            <el-row>
                <el-col :span="3">
                    <div class="grid-content"></div>
                </el-col>
                <el-col :span="12">
                    <h1 class="">个人中心</h1>
                </el-col>
                <el-col :span="1">
                    <el-menu-item index="4" @click="uindex()">首页</el-menu-item>
                </el-col>
                <el-col :span="1">
                    <el-menu-item index="4" @click="movies()">电影</el-menu-item>
                </el-col>
                <el-col :span="1">
                    <el-menu-item index="4" @click="books()">图书</el-menu-item>
                </el-col>
                <el-col :span="1">
                    <el-menu-item index="4" @click="musics()">音乐</el-menu-item>
                </el-col>
                <el-col :span="2">
                    <el-submenu index="2">
                        <template slot="title">用户中心</template>
                        <el-menu-item index="2-1" @click="enter()">个人历程</el-menu-item>
                        <el-menu-item index="2-2" @click="edit()">信息修改</el-menu-item>
                        <el-menu-item index="2-3" @click="loginOut()">退出登录</el-menu-item>
                    </el-submenu>
                </el-col>
                <el-col :span="3">
                </el-col>
            </el-row>
        </el-menu>
        <!--        日历-->
        <el-row>
            <el-col :span="3">
                <div class="grid-content"></div>
            </el-col>
            <el-col :span="18">
                <el-calendar>
                    <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                    <template
                            slot="dateCell"
                            slot-scope="{date, data}">
                        <div :class="data.isSelected ? 'is-selected' : ''" @click="handleAddClick(data.day)">
                            {{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : ''}}
                        </div>
                        <div v-for="item in Calendar">
                            <div v-if="(item.EventTime).indexOf(data.day.split('-').slice(0).join('-'))!=-1">
                                <div class="fc-day-grid-event">
                                    <div v-if="(item.EventType==='1')" id="fc-eventone" @click="handleEventClick(item.id)">{{ item.EventTitle }}</div>
                                    <div v-if="(item.EventType==='2')" id="fc-eventtwo" @click="handleEventClick(item.id)">{{ item.EventTitle }}</div>
                                </div>
                            </div>

                        </div>

                    </template>
                </el-calendar>
            </el-col>
            <el-col :span="3">
            </el-col>
        </el-row>

        <el-dialog :title="optTitle" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="内容">
                    <el-input v-model="form.actor"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio v-model="radio" label="1">已完成</el-radio>
                    <el-radio v-model="radio" label="2">待完成</el-radio>
                </el-form-item>

            </el-form>
            <el-button v-if="form.id" type="warning" style="float: left;" @click="delEvent">删 除</el-button>
            <el-button style="float: right;" @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveEvent">确 定</el-button>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'UserPerson',
        components: {

        },
        data(){
            return {
                radio: '1',
                Calendar: [{id:"2",EventType:'1',EventTitle:'开始看《java大作业》',EventTime:'2020-06-04'}
                    , {id:"11",EventType:'2',EventTitle:'看玩《java大作业》',EventTime:'2020-06-20'}, {id:"111",EventType:'1',EventTitle:'看玩《数据库视频》',EventTime:'2020-06-02'}
                ],
                form: {
                    id: null,
                    EventTitle: null,
                    EventTime: null,
                    EventType:null,
                    content:null,
                },
                calendarEvents: [],
                dialogFormVisible: false,
                optTitle: '添加事件',
                loading: false,
                value: new Date()
            }
        },
        mounted() {
            this.loading = true;
        },
        methods: {
            loginOut(){
                localStorage.removeItem('telephone');
                this.$message.success('退出成功');
                this.$router.push('/u_login');
            },
            regist(){
                this.$router.push('/u_regist');
            },
            uindex(){
                this.$router.push('/u_login_index');
            },
            movies(){
                this.$router.push('/u_movies');
            },
            books(){
                this.$router.push('/u_books');
            },
            musics(){
                this.$router.push('/u_musics');
            },
            edit(){
                this.$router.push('/u_form');
            },
            enter(){
                // if(isLogin())
                this.$router.push('/u_person');
            },
            ToDate(tim) {//时间处理
                const d = new Date(tim)
                d.setHours(0, 0, 0, 0);
                return tim = d.setHours(0, 0, 0, 0)
            },
            load() {
                //刷新数据的方法，重新查询一遍数据也可
            },
            // 新增
            handleAddClick(date) {
                this.dialogFormVisible = true
                this.optTitle = '新增事件';
                this.content="";
                this.form.id = '';
                //加入需要在弹窗新增的

            },
            handleEventClick(info) {
                this.dialogFormVisible = true;
                this.optTitle = '修改事件';
                this.form.id =info;
                GetCalendar(params)
                    .then(result => {
                        this.form = {
                            id: result.Calendar[0].id,
                            //加上相应的弹窗值，
                        };
                    });
            },
            // 保存事件
            saveEvent() {
                const _form = this.form;
                SaveCalendar(_form).then(result => {
                    if (result.status.result === true) {
                        if (this.form.id === undefined || this.form.id === '') { // 新增
                            this.$message({
                                message: '新增成功！',
                                type: 'success'
                            });
                        } else {//修改
                            this.$message({
                                message: '修改成功！',
                                type: 'success'
                            });
                        }
                        this.dialogFormVisible = false;
                        this.load()
                    } else {
                        this.$message({
                            message: result.message + '失败',
                            type: 'error'
                        });
                    }
                });
            },
            // 删除事件
            delEvent() {
                const _form = this.form;
                SaveCalendar(_form).then(result => { //SaveCalendar(_form)后台存数据
                    if (result.status.result === true) {
                        this.load()
                        this.dialogFormVisible = false;
                        this.$message({
                            message: '删除成功！',
                            type: 'success'
                        });

                        // location.reload()
                    } else {
                        this.$message({
                            message: result.message + '删除失败',
                            type: 'error'
                        });
                    }
                });
            }
        }
    }
</script>
<style>
    .calendar-day{
        text-align: center;
        color: #202535;
        line-height: 30px;
        font-size: 12px;
    }
    .is-selected{
        color: #F8A535;
        font-size: 10px;
        margin-top: 5px;
    }
    #calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after{
        content: '当月';
    }
</style>
